<div class="cil__info-item-blocks">
  <div
    nz-row
    class="cil__info-item-block"
    [style.height]="height + 'px'"
    nzType="flex"
    nzAlign="middle"
    nzJustify="space-between"
  >
    <div
      nz-col
      *ngFor="let column of columns; index as i"
      data-id="{{column.id}}"
      class="cil__info-item"
      [ngClass]="hoverClassName(column)"
      [nzSpan]="column.span"
      (click)="activeItem(column.id,column)"
      [acl]="canAbility(column)">
      <div *ngIf="!column.operate" class="cil__info-item--div">
        <div
          [class]="getLabelClass(column.diff)"
          [class.editable]="column.hover && !column.disEditable"
          [ngClass]="editClassName(column)">
          <ng-container *ngIf="column.labelI18n; else normalLabel">{{(column.labelI18n | i18n) + getIsNewTag(column.diff) }}</ng-container>
          <ng-template #normalLabel>
            <ng-container>{{column.label + getIsNewTag(column.diff)}}</ng-container>
          </ng-template>
          <ng-container *ngIf="column.tip">
            <span nz-tooltip="{{column.tip | i18n}}" nzPlacement="topRight">
              <i nz-icon [nzIconfont]="'icon-refund-tip'"></i>
            </span>
          </ng-container>
        </div>
        <ng-container *ngIf="!column.disEditable && !(column.asyncDisEditable | async)">
          <div *ngIf="!ifEdit && column.displayTemplate" [class]="getValueClass(column.diff)">
            <ng-container *ngTemplateOutlet="column.displayTemplate; context: {rowIndex: rowIndex, column: column};"></ng-container>
          </div>
          <div
            *ngIf="!ifEdit && !column.displayTemplate && !column.asyncValue"
            [class]="getValueClass(column.diff)"
            nz-popover
            nzPlacement="bottom"
            [nzContent]="!!column.displayValue ? column.displayValue : column.value"
          >
            {{ column.displayValue ? column.displayValue : (checkValueIsDisplayDirectly(column.value) ? column.value.toString() : '-') }}
          </div>
          <div *ngIf="!ifEdit && column.asyncValue" [class]="getValueClass(column.diff)" nz-popover nzPlacement="bottom" [nzContent]="column.value">
            {{ column.asyncValue | async }}
          </div>
          <ng-container *ngIf="ifEdit && !column.template" >
            <input 
              class="cil__input"
              [ngModel]="column.value" 
              (ngModelChange)="column.value=$event;validate($event,errorPopover,column)"
              (click)="clickHandler(errorPopover,column)"
            >
            <div 
              nz-popover 
              [nzContent]="column.validator?.currentErrorTip" 
              [nzTrigger]="'click'" 
              [nzPlacement]="'bottom'"
              [nzVisible]="column.validator?.isError && showPopoverIndex === column.index"
              [nzOverlayClassName]="'error-popover'"
              (nzVisibleChange)="popoverChange($event)"
              #errorPopover>
            </div>
          </ng-container>
          <div *ngIf="ifEdit && column.template" class="cil__value">
            <ng-container *ngTemplateOutlet="column.template; context: {rowIndex: rowIndex, column: column};"></ng-container>
          </div>
        </ng-container>
        <ng-container *ngIf="column.disEditable || (column.asyncDisEditable | async)">
          <div *ngIf="column.displayTemplate" class='cil__value'>
            <ng-container *ngTemplateOutlet="column.displayTemplate; context: {rowIndex: rowIndex, column: column};"></ng-container>
          </div>
          <div
            *ngIf="!column.displayTemplate"
            class="cil__value"
            [class.disableEdit]="ifEdit"
            nz-popover
            nzPlacement="bottom"
            [nzContent]="!!column.displayValue ? column.displayValue : column.value"
          >{{column.displayValue ? column.displayValue : (checkValueIsDisplayDirectly(column.value) ? column.value.toString() : '-')}}</div>
        </ng-container>
      </div>

      <div *ngIf="column.operate && column.template" class="cil__info-item--div">
        <div class="cil__label">
          <ng-container *ngIf="column.labelI18n; else normalLabel">{{column.labelI18n | i18n}}</ng-container>
          <ng-template #normalLabel>
            <ng-container>{{column.label}}</ng-container>
          </ng-template>
          <ng-container *ngIf="column.tip">
            <span nz-tooltip="{{column.tip | i18n}}" nzPlacement="topRight">
              <i nz-icon [nzIconfont]="'icon-refund-tip'"></i>
            </span>
          </ng-container>
        </div>
        <div class="cil__value">
          <ng-container *ngTemplateOutlet="column.template; context: {rowIndex: rowIndex, column: column};"></ng-container>
        </div>
      </div>
    </div>
  </div>
</div>
